<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Scroll To Text Fragment</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <link href="https://www.w3.org/StyleSheets/TR/2016/cg-draft" rel="stylesheet">
  <link href="wicg.github.io/ScrollToTextFragment/index.html" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1 class="p-name no-ref" id="title">Scroll To Text Fragment</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Draft Community Group Report, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="wicg.github.io/ScrollToTextFragment/index.html">wicg.github.io/ScrollToTextFragment/index.html</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:nburris@chromium.org">Nick Burris</a> (<a class="p-org org" href="https://www.google.com">Google</a>)
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:bokan@chromium.org">David Bokan</a> (<a class="p-org org" href="https://www.google.com">Google</a>)
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 the Contributors to the Scroll To Text Fragment Specification, published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a> under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>.
A human-readable <a href="http://www.w3.org/community/about/agreements/cla-deed/">summary</a> is available. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>Scroll To Text adds support for specifying a text snippet in the URL

    fragment. When navigating to a URL with such a fragment, the browser will
    find the first instance of the text snippet and scroll it into view.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This specification was published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a>.
  It is not a W3C Standard nor is it on the W3C Standards Track.

  Please note that under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a> there is a limited opt-out and other conditions apply.

  Learn more about <a href="http://www.w3.org/community/">W3C Community and Business Groups</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#introduction"><span class="secno">1</span> <span class="content">Introduction</span></a>
     <ol class="toc">
      <li>
       <a href="#use-cases"><span class="secno">1.1</span> <span class="content">Use cases</span></a>
       <ol class="toc">
        <li><a href="#web-text-references"><span class="secno">1.1.1</span> <span class="content">Web text references</span></a>
        <li><a href="#user-sharing"><span class="secno">1.1.2</span> <span class="content">User sharing</span></a>
       </ol>
     </ol>
    <li>
     <a href="#description"><span class="secno">2</span> <span class="content">Description</span></a>
     <ol class="toc">
      <li>
       <a href="#syntax"><span class="secno">2.1</span> <span class="content">Syntax</span></a>
       <ol class="toc">
        <li><a href="#context-terms"><span class="secno">2.1.1</span> <span class="content">Context Terms</span></a>
       </ol>
      <li>
       <a href="#the-fragment-directive"><span class="secno">2.2</span> <span class="content">The Fragment Directive</span></a>
       <ol class="toc">
        <li><a href="#parsing-the-fragment-directive"><span class="secno">2.2.1</span> <span class="content">Parsing the fragment directive</span></a>
        <li><a href="#fragment-directive-grammar"><span class="secno">2.2.2</span> <span class="content">Fragment directive grammar</span></a>
       </ol>
      <li>
       <a href="#security-and-privacy"><span class="secno">2.3</span> <span class="content">Security and Privacy</span></a>
       <ol class="toc">
        <li><a href="#motivation"><span class="secno">2.3.1</span> <span class="content">Motivation</span></a>
        <li><a href="#search-timing"><span class="secno">2.3.2</span> <span class="content">Search Timing</span></a>
        <li><a href="#should-allow-text-fragment"><span class="secno">2.3.3</span> <span class="content">Should Allow Text Fragment</span></a>
        <li><a href="#allow-text-fragment-directive-flag"><span class="secno">2.3.4</span> <span class="content">allowTextFragmentDirective flag</span></a>
       </ol>
      <li>
       <a href="#navigating-to-text-fragment"><span class="secno">2.4</span> <span class="content">Navigating to a Text Fragment</span></a>
       <ol class="toc">
        <li><a href="#scroll-rect-into-view"><span class="secno">2.4.1</span> <span class="content">Scroll a DOMRect into view</span></a>
        <li><a href="#find-text-matches"><span class="secno">2.4.2</span> <span class="content">Find text matches</span></a>
        <li><a href="#find-a-target-text"><span class="secno">2.4.3</span> <span class="content">Find a target text</span></a>
        <li><a href="#find-match-with-context"><span class="secno">2.4.4</span> <span class="content">Find an exact match with context</span></a>
        <li><a href="#advance-walker-to-text"><span class="secno">2.4.5</span> <span class="content">Advance a TreeWalker to the next text node</span></a>
        <li><a href="#next-word-bounded-instance"><span class="secno">2.4.6</span> <span class="content">Find the next word bounded instance</span></a>
       </ol>
      <li><a href="#indicating-the-text-match"><span class="secno">2.5</span> <span class="content">Indicating The Text Match</span></a>
      <li><a href="#feature-detectability"><span class="secno">2.6</span> <span class="content">Feature Detectability</span></a>
     </ol>
    <li>
     <a href="#generating-text-fragment-directives"><span class="secno">3</span> <span class="content">Generating Text Fragment Directives</span></a>
     <ol class="toc">
      <li><a href="#prefer-exact-matching-to-range-based"><span class="secno">3.1</span> <span class="content">Prefer Exact Matching To Range-based</span></a>
      <li><a href="#use-context-only-when-necessary"><span class="secno">3.2</span> <span class="content">Use Context Only When Necessary</span></a>
      <li><a href="#determine-if-fragment-id-is-needed"><span class="secno">3.3</span> <span class="content">Determine If Fragment Id Is Needed</span></a>
     </ol>
    <li><a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="introduction"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#introduction"></a></h2>
   <div class="note" role="note">This section is non-normative</div>
   <h3 class="heading settled" data-level="1.1" id="use-cases"><span class="secno">1.1. </span><span class="content">Use cases</span><a class="self-link" href="#use-cases"></a></h3>
   <h4 class="heading settled" data-level="1.1.1" id="web-text-references"><span class="secno">1.1.1. </span><span class="content">Web text references</span><a class="self-link" href="#web-text-references"></a></h4>
    The core use case for scroll to text is to allow URLs to serve as an exact text
reference across the web. For example, Wikipedia references could link to the
exact text they are quoting from a page. Similarly, search engines can serve
URLs that direct the user to the answer they are looking for in the page rather
than linking to the top of the page. 
   <h4 class="heading settled" data-level="1.1.2" id="user-sharing"><span class="secno">1.1.2. </span><span class="content">User sharing</span><a class="self-link" href="#user-sharing"></a></h4>
    With scroll to text, browsers may implement an option to 'Copy URL to here'
when the user opens the context menu on a text selection. The browser can
then generate a URL with the text selection appropriately specified, and the
recipient of the URL will have the text scrolled into view and visually
indicated.  Without scroll to text, if a user wants to share a passage of text
from a page, they would likely just copy and paste the passage, in which case
the receiver loses the context of the page. 
   <h2 class="heading settled" data-level="2" id="description"><span class="secno">2. </span><span class="content">Description</span><a class="self-link" href="#description"></a></h2>
   <h3 class="heading settled" data-level="2.1" id="syntax"><span class="secno">2.1. </span><span class="content">Syntax</span><a class="self-link" href="#syntax"></a></h3>
   <div class="note" role="note">This section is non-normative</div>
   <p>A <a data-link-type="dfn" href="#text-fragment-directive" id="ref-for-text-fragment-directive">text fragment directive</a> is specified in the <a data-link-type="dfn" href="#fragment-directive" id="ref-for-fragment-directive">fragment directive</a> (see <a href="#the-fragment-directive">§ 2.2 The Fragment Directive</a>) with the following format:</p>
<pre>#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
          context  |-------match-----|  context
</pre>
   <p><em>(Square brackets indicate an optional parameter)</em></p>
   <p>The text parameters are percent-decoded before matching. Dash (-), ampersand
(&amp;), and comma (,) characters in text parameters must be percent-encoded to
avoid being interpreted as part of the text directive syntax.</p>
   <p>The only required parameter is textStart. If only textStart is specified, the
first instance of this exact text string is the target text.</p>
   <div class="example" id="example-4e85550d"><a class="self-link" href="#example-4e85550d"></a> <code>#:~:text=an%20example%20text%20fragment</code> indicates that the
exact text "an example text fragment" is the target text. </div>
   <p>If the textEnd parameter is also specified, then the text directive refers to a
range of text in the page. The target text range is the text range starting at
the first instance of startText, until the first instance of endText that
appears after startText. This is equivalent to specifying the entire text range
in the startText parameter, but allows the URL to avoid being bloated with a
long text directive.</p>
   <div class="example" id="example-7df2027e"><a class="self-link" href="#example-7df2027e"></a> <code>#:~:text=an%20example,text%20fragment</code> indicates that the first
instance of "an example" until the following first instance of "text fragment"
is the target text. </div>
   <h4 class="heading settled" data-level="2.1.1" id="context-terms"><span class="secno">2.1.1. </span><span class="content">Context Terms</span><a class="self-link" href="#context-terms"></a></h4>
   <div class="note" role="note">This section is non-normative</div>
   <p>The other two optional parameters are context terms. They are specified by the
dash (-) character succeeding the prefix and preceding the suffix, to
differentiate them from the textStart and textEnd parameters, as any
combination of optional parameters may be specified.</p>
   <p>Context terms are used to disambiguate the target text fragment. The context
terms can specify the text immediately before (prefix) and immediately after
(suffix) the text fragment, allowing for whitespace.</p>
   <div class="note" role="note"> While the context terms must be the immediate text surrounding the target text
fragment, any amount of whitespace is allowed between context terms and the
text fragment. This helps allow context terms to be across element boundaries,
for example if the target text fragment is at the beginning of a paragraph and
it must be disambiguated by the previous element’s text as a prefix. </div>
   <p>The context terms are not part of the target text fragment and must not be
visually indicated or affect the scroll position.</p>
   <div class="example" id="example-5c87b699"><a class="self-link" href="#example-5c87b699"></a> <code>#:~:text=this%20is-,an%20example,-text%20fragment</code> would match
to "an example" in "this is an example text fragment", but not match to "an
example" in "here is an example text". </div>
   <h3 class="heading settled" data-level="2.2" id="the-fragment-directive"><span class="secno">2.2. </span><span class="content">The Fragment Directive</span><a class="self-link" href="#the-fragment-directive"></a></h3>
    To avoid compatibility issues with usage of existing URL fragments, this spec
introduces the <a data-link-type="dfn" href="#fragment-directive" id="ref-for-fragment-directive①">fragment directive</a>. The <a data-link-type="dfn" href="#fragment-directive" id="ref-for-fragment-directive②">fragment directive</a> is a portion
of the URL fragment delimited by the code sequence <code>:~:</code>. It is
reserved for UA instructions, such as text=, and is stripped from the URL
during loading so that author scripts can’t directly interact with it. 
   <p>The <a data-link-type="dfn" href="#fragment-directive" id="ref-for-fragment-directive③">fragment directive</a> is a mechanism for URLs to specify instructions meant
for the UA rather than the document. It’s meant to avoid direct interaction with
author script so that future UA instructions can be added without fear of
introducing breaking changes to existing content. Potential examples could be:
translation-hints or enabling accessibility features.</p>
   <h4 class="heading settled" data-level="2.2.1" id="parsing-the-fragment-directive"><span class="secno">2.2.1. </span><span class="content">Parsing the fragment directive</span><a class="self-link" href="#parsing-the-fragment-directive"></a></h4>
   <p>To the definition of <a href="https://dom.spec.whatwg.org/#concept-document">Document</a>, add:</p>
   <p><em> Each document has an associated <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="fragment-directive">fragment directive</dfn> which is either
null or an ASCII string holding data used by the UA to process the resource. It
is initially null. </em></p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="fragment-directive-delimiter">fragment directive delimiter</dfn> is the string ":~:", that is the
three consecutive code points U+003A (:), U+007E (~), U+003A (:).</p>
   <div class="note" role="note"> The <a data-link-type="dfn" href="#fragment-directive" id="ref-for-fragment-directive④">fragment directive</a> is part of the URL fragment. This means it must
  always appear after a U+0023 (#) code point in a URL. </div>
   <div class="example" id="example-aa58e32d"><a class="self-link" href="#example-aa58e32d"></a> To add a <a data-link-type="dfn" href="#fragment-directive" id="ref-for-fragment-directive⑤">fragment directive</a> to a URL like https://example.com, a fragment
  must first be appended to the URL: https://example.com#:~:text=foo. </div>
   <p>Amend the <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#initialise-the-document-object"> create and initialize a Document object</a> steps to parse and remove the <a data-link-type="dfn" href="#fragment-directive" id="ref-for-fragment-directive⑥">fragment directive</a> from the Document’s <span spec-section="#concept-document-url">URL</span>.</p>
   <p>Replace steps 7 and 8 of this algorithm with:</p>
   <ol start="7">
    <li data-md>
     <p>Let <em>url</em> be null</p>
    <li data-md>
     <p>If <em>request</em> is non-null, then set <em>document</em>’s <span spec-section="#concept-document-url">URL</span> to <em>request</em>’s <span spec-section="#concept-request-current-url">current URL</span>.</p>
    <li data-md>
     <p>Otherwise, set <em>url</em> to <em>response</em>’s <span spec-section="#concept-response-url">URL</span>.</p>
    <li data-md>
     <p>Let <em>raw fragment</em> be equal to <em>url</em>’s <span spec-section="#concept-url-fragment">fragment</span>.</p>
    <li data-md>
     <p>Let <em>fragment directive position</em> be a <span spec-section="#string-position-variable">position variable</span> that points to the
beginning of <em>raw fragment</em>.</p>
    <li data-md>
     <p>While the string starting at position <em>fragment directive position</em> does not start with the <a data-link-type="dfn" href="#fragment-directive-delimiter" id="ref-for-fragment-directive-delimiter">fragment directive delimiter</a> and <em>fragment
directive position</em> does not point past the end of <em>raw fragment</em>:</p>
     <ol>
      <li data-md>
       <p>Advance <em>fragment directive position</em> by 1.</p>
     </ol>
    <li data-md>
     <p>If <em>fragment directive position</em> does not point past the end of <em>raw fragment</em>:</p>
     <ol>
      <li data-md>
       <p>Let <em>fragment</em> be the substring of <em>raw fragment</em> ending at <em>fragment directive position</em>.</p>
      <li data-md>
       <p>Advance <em>fragment directive position</em> by the length of <a data-link-type="dfn" href="#fragment-directive-delimiter" id="ref-for-fragment-directive-delimiter①">fragment
directive delimiter</a>.</p>
      <li data-md>
       <p>Let <em>fragment directive</em> be the substring of <em>raw fragment</em> starting at <em>fragment directive position</em>.</p>
      <li data-md>
       <p>Set <em>url</em>’s <span spec-section="#concept-url-fragment">fragment</span> to <em>fragment</em>.</p>
      <li data-md>
       <p>Set <em>document</em>’s <a data-link-type="dfn" href="#fragment-directive" id="ref-for-fragment-directive⑦">fragment directive</a> to <em>fragment
directive</em>. (Note: this is stored on the document but not
web-exposed)</p>
     </ol>
    <li data-md>
     <p>Set <em>document</em>’s <span spec-section="#concept-document-url">URL</span> to be <em>url</em>.</p>
   </ol>
   <div class="note" role="note"> These changes make a URL’s fragment end at the <a data-link-type="dfn" href="#fragment-directive-delimiter" id="ref-for-fragment-directive-delimiter②">fragment directive
  delimiter</a>. The <a data-link-type="dfn" href="#fragment-directive" id="ref-for-fragment-directive⑧">fragment directive</a> includes all characters that follow,
  but not including, the delimiter. </div>
   <div class="example" id="example-775c8cc2"><a class="self-link" href="#example-775c8cc2"></a> <code>https://example.org/#test:~:text=foo</code> will be parsed such that
the fragment is the string "test" and the <a data-link-type="dfn" href="#fragment-directive" id="ref-for-fragment-directive⑨">fragment directive</a> is the string
"text=foo". </div>
   <h4 class="heading settled" data-level="2.2.2" id="fragment-directive-grammar"><span class="secno">2.2.2. </span><span class="content">Fragment directive grammar</span><a class="self-link" href="#fragment-directive-grammar"></a></h4>
    A <dfn data-dfn-type="dfn" data-noexport id="valid-fragment-directive">valid fragment directive<a class="self-link" href="#valid-fragment-directive"></a></dfn> is a sequence of characters that appears
in the <a data-link-type="dfn" href="#fragment-directive" id="ref-for-fragment-directive①⓪">fragment directive</a> that matches the production: 
   <dl> <code><dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="fragmentdirective">FragmentDirective</dfn> ::=</dt> <dd>(<a data-link-type="dfn" href="#textdirective" id="ref-for-textdirective">TextDirective</a> | <a data-link-type="dfn" href="#unknowndirective" id="ref-for-unknowndirective">UnknownDirective</a>) ("&amp;" <a data-link-type="dfn" href="#fragmentdirective" id="ref-for-fragmentdirective">FragmentDirective</a>)?</dd></code> <code><dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="unknowndirective">UnknownDirective</dfn> ::=</dt> <dd><a data-link-type="dfn" href="#characterstring" id="ref-for-characterstring">CharacterString</a></dd></code> </dl>
   <div class="note" role="note"> The <a data-link-type="dfn" href="#fragmentdirective" id="ref-for-fragmentdirective②">FragmentDirective</a> may contain multiple directives split by the "&amp;"
character. Currently this means we allow multiple text directives to enable
multiple indicated strings in the page, but this also allows for future
directive types to be added and combined. For extensibility, we do not fail to
parse if an unknown directive is in the &amp;-separated list of directives. </div>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="text-fragment-directive">text fragment directive</dfn> is one such <a data-link-type="dfn" href="#fragment-directive" id="ref-for-fragment-directive①①">fragment directive</a> that
enables specifying a piece of text on the page, that matches the production:</p>
   <dl>
     <code><dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="textdirective">TextDirective</dfn> ::=</dt><dd>"text=" <a data-link-type="dfn" href="#textdirectiveparameters" id="ref-for-textdirectiveparameters">TextDirectiveParameters</a></dd></code> 
    <p><code></code></p>
    <dt><code><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="textdirectiveparameters">TextDirectiveParameters</dfn> ::=</code>
    <dd><code> (<a data-link-type="dfn" href="#textdirectiveprefix" id="ref-for-textdirectiveprefix">TextDirectivePrefix</a> ",")? <a data-link-type="dfn" href="#characterstring" id="ref-for-characterstring①">CharacterString</a> ("," <a data-link-type="dfn" href="#characterstring" id="ref-for-characterstring②">CharacterString</a>)?
("," <a data-link-type="dfn" href="#textdirectivesuffix" id="ref-for-textdirectivesuffix">TextDirectiveSuffix</a>)?</code>
    <p></p>
    <p><code></code></p>
    <dt><code><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="textdirectiveprefix">TextDirectivePrefix</dfn> ::=</code>
    <dd><code><a data-link-type="dfn" href="#characterstring" id="ref-for-characterstring③">CharacterString</a> "-"</code>
    <p></p>
    <p><code></code></p>
    <dt><code><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="textdirectivesuffix">TextDirectiveSuffix</dfn> ::=</code>
    <dd><code>"-" <a data-link-type="dfn" href="#characterstring" id="ref-for-characterstring④">CharacterString</a></code>
    <p></p>
    <p><code></code></p>
    <dt><code><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="characterstring">CharacterString</dfn> ::=</code>
    <dd><code>(<a data-link-type="dfn" href="#explicitchar" id="ref-for-explicitchar">ExplicitChar</a> | <a data-link-type="dfn" href="#percentencodedchar" id="ref-for-percentencodedchar">PercentEncodedChar</a>)+</code>
    <p></p>
    <p><code></code></p>
    <dt><code><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="explicitchar">ExplicitChar</dfn> ::=</code>
    <dd><code>[a-zA-Z0-9] | "!" | "$" | "'" |
"(" | ")" | "*" | "+" | "." | "/" | ":" | ";" | "=" | "?" | "@" | "_" | "~"</code>
    <code> </code>
    <p></p>
    <div class="note" role="note"> A <a data-link-type="dfn" href="#explicitchar" id="ref-for-explicitchar①">ExplicitChar</a> may be any <a href="https://url.spec.whatwg.org/#url-code-points">URL code point</a> that
is not explicitly used in the <a data-link-type="dfn" href="#textdirective" id="ref-for-textdirective①">TextDirective</a> syntax, that is "&amp;", "-", and
",", which must be percent-encoded. </div>
     <code><dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="percentencodedchar">PercentEncodedChar</dfn> ::=</dt><dd>"%" [a-zA-Z0-9]+</dd></code> 
   </dl>
   <h3 class="heading settled" data-level="2.3" id="security-and-privacy"><span class="secno">2.3. </span><span class="content">Security and Privacy</span><a class="self-link" href="#security-and-privacy"></a></h3>
   <h4 class="heading settled" data-level="2.3.1" id="motivation"><span class="secno">2.3.1. </span><span class="content">Motivation</span><a class="self-link" href="#motivation"></a></h4>
   <div class="note" role="note">This section is non-normative</div>
   <p>Care must be taken when implementing <a data-link-type="dfn" href="#text-fragment-directive" id="ref-for-text-fragment-directive①">text fragment directive</a> so that it
cannot be used to exfiltrate information across origins. Scripts can navigate
a page to a cross-origin URL with a <a data-link-type="dfn" href="#text-fragment-directive" id="ref-for-text-fragment-directive②">text fragment directive</a>.  If a malicious
actor can determine that a victim page scrolled after such a navigation, they
can infer the existence of any text on the page.</p>
   <p>In addition, the user’s privacy should be ensured even from the destination
origin.  Although scripts on that page can already learn a lot about a user’s
actions, a <a data-link-type="dfn" href="#text-fragment-directive" id="ref-for-text-fragment-directive③">text fragment directive</a> can still contain sensitive information.
For this reason, this specification provides no way for a page to extract the
content of the text fragment anchor. User agents must not expose this
information to the page.</p>
   <div class="example" id="example-9ced00a5"><a class="self-link" href="#example-9ced00a5"></a> A user visiting a page listing dozens of medical conditions may have gotten
  there via a link with a <a data-link-type="dfn" href="#text-fragment-directive" id="ref-for-text-fragment-directive④">text fragment directive</a> containing a specific
  condition. This information must not be shared with the page. </div>
   <p>The following subsections restrict the feature to mitigate the expected attack
vectors. In summary, the text fragment directives are invoked only on full
(non-same-page) navigations that are the result of a user activation.
Additionally, navigations originating from a different origin than the
destination will require the navigation to take place in a "noopener" context,
such that the destination page is known to be sufficiently isolated.</p>
   <h4 class="heading settled" data-level="2.3.2" id="search-timing"><span class="secno">2.3.2. </span><span class="content">Search Timing</span><a class="self-link" href="#search-timing"></a></h4>
   <p>A naive implementation of the text search algorithm could allow information
exfiltration based on runtime duration differences between a matching and non-
matching query. If an attacker were to find a way to synchronously navigate
to a <a data-link-type="dfn" href="#text-fragment-directive" id="ref-for-text-fragment-directive⑤">text fragment directive</a>-invoking URL, they would be able to determine
the existence of a text snippet by measuring how long the navigation call takes.</p>
   <div class="note" role="note"> The restrictions in <a href="#should-allow-text-fragment">§ 2.3.3 Should Allow Text Fragment</a> should prevent this
  specific case; in particular, the no-same-document-navigation restriction.
  However, these restrictions are provided as multiple layers of defence. </div>
   <p>For this reason, the implementation <em>must ensure the runtime of <a href="#navigating-to-text-fragment">§ 2.4 Navigating to a Text Fragment</a> steps does not differ based on whether a match
has been successfully found</em>.</p>
   <p>This specification does not specify exactly how a UA achieves this as there are
multiple solutions with differing tradeoffs. For example, a UA <em>may</em> continue to walk the tree even after a match is found in <a href="#find-a-target-text">§ 2.4.3 Find a target text</a>.  Alternatively, it <em>may</em> schedule an
asynchronous task to find and set the indicated part of the document.</p>
   <h4 class="heading settled" data-level="2.3.3" id="should-allow-text-fragment"><span class="secno">2.3.3. </span><span class="content">Should Allow Text Fragment</span><a class="self-link" href="#should-allow-text-fragment"></a></h4>
   <div class="note" role="note"> This algorithm has input <em>is user triggered, incumbentNavigationOrigin,
  document</em> and returns a boolean indicating whether a <a data-link-type="dfn" href="#text-fragment-directive" id="ref-for-text-fragment-directive⑥">text fragment
  directive</a> should be allowed to invoke on the given Document. </div>
   <ol>
    <li data-md>
     <p>If <em>is user triggered</em> is false, return false.</p>
    <li data-md>
     <p>If the <a href="https://html.spec.whatwg.org/#document">Document</a> of the <span spec-section="#latest-entry">latest entry</span> in <em>document</em>’s <span spec-section="#browsing-context">browsing context</span>'s <span spec-section="#session-history">session history</span> is equal to <em>document</em>,
   return false.</p>
     <div class="note" role="note"> i.e. Forbidden on a same-document navigation. </div>
    <li data-md>
     <p>If <em>incumbentNavigationOrigin</em> is equal to the origin of <em>document</em> return true.</p>
    <li data-md>
     <p>If <em>document</em>’s <em>browsingContext</em> is a top level browsing context and its <span spec-section="#tlbc-group">group</span>'s <span spec-section="#browsing-context-set">browsing context set</span> has length 1 return true.</p>
     <div class="note" role="note"> i.e. Only allow navigation from a cross-process element/script if the
 document is loaded in a noopener context. That is, a new top level
 browsing context group to which the navigator does not have script access
 and which may be placed into a separate process. </div>
    <li data-md>
     <p>Otherwise, return false.</p>
   </ol>
   <h4 class="heading settled" data-level="2.3.4" id="allow-text-fragment-directive-flag"><span class="secno">2.3.4. </span><span class="content">allowTextFragmentDirective flag</span><a class="self-link" href="#allow-text-fragment-directive-flag"></a></h4>
   <div class="note" role="note"> The algorithm to determine whether or not a text fragment directive should be
  allowed to invoke must be run during document navigation and creation and
  stored as a flag since it relies on the properties of the navigation while
  the invocation will occur as part of the <span spec-section="#scroll-to-the-fragment-identifier">scroll to the fragment</span> steps which
  can happen outside the context of a navigation. </div>
   <p>Amend the <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#read-html">page load processing model for HTML files</a> to insert
these steps after step 1:</p>
   <ol start="2">
    <li data-md>
     <p>Let <em>is user activated</em> be true if the current navigation was <a href="https://html.spec.whatwg.org/#triggered-by-user-activation"> triggered
   by user activation</a></p>
    <li data-md>
     <p>Set <em>document</em>’s <em>allowTextFragmentDirective</em> flag to the
   result of running <a href="#should-allow-text-fragment">§ 2.3.3 Should Allow Text Fragment</a> with <em>is user
   activated</em>, <em>incumbentNavigationOrigin</em>, and <em>document</em>.</p>
   </ol>
   <p>Amend the <span spec-section="#try-to-scroll-to-the-fragment">try to scroll to the fragment</span> steps by replacing the steps of the task queued in step 2:</p>
   <ol>
    <li data-md>
     <p>If document has no parser, or its parser has stopped parsing, or the user
   agent has reason to believe the user is no longer interested in scrolling to
   the fragment, then clear <em>document</em>’s <em>allowTextFragmentDirective</em> flag and abort these steps.</p>
    <li data-md>
     <p>Scroll to the fragment given in document’s URL. If this does not find an
   indicated part of the document, then try to scroll to the fragment for
   document.</p>
    <li data-md>
     <p>Clear <em>document</em>’s <em>allowTextFragmentDirective</em> flag</p>
   </ol>
   <h3 class="heading settled" data-level="2.4" id="navigating-to-text-fragment"><span class="secno">2.4. </span><span class="content">Navigating to a Text Fragment</span><a class="self-link" href="#navigating-to-text-fragment"></a></h3>
   <div class="note" role="note"> The scroll to text specification proposes an amendment to <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-fragid">HTML 5 §7.8.9 Navigating to a fragment</a>. In summary, if a <a data-link-type="dfn" href="#text-fragment-directive" id="ref-for-text-fragment-directive⑦">text fragment directive</a> is
present and a match is found in the page, the text fragment takes precedent over
the element fragment as the indicated part of the document. We amend the
indicated part of the document to optionally include a <span spec-section="#range">Range</span> that
is scrolled into view instead of the containing element. </div>
   <p>Replace step 3.1 of the <span spec-section="#scroll-to-the-fragment-identifier">scroll to the
fragment</span> algorithm with the following:</p>
   <ol start="3">
    <li data-md>
     <p>Otherwise:</p>
     <ol>
      <li data-md>
       <p>Let <em>target, range</em> be the <span spec-section="#element">Element</span> and <span spec-section="#range">Range</span> that is <span spec-section="#the-indicated-part-of-the-document">the indicated part of the
document</span>.</p>
     </ol>
   </ol>
   <p>Replace step 3.3 of the <span spec-section="#scroll-to-the-fragment-identifier">scroll to the
fragment</span> algorithm with the following:</p>
   <ol start="3">
    <li data-md>
     <p>Otherwise:</p>
     <ol start="3">
      <li data-md>
       <p>If <em>range</em> is non-null:</p>
       <ol>
        <li data-md>
         <p><a data-link-type="dfn" href="#scroll-a-range-into-view" id="ref-for-scroll-a-range-into-view">Scroll range into view</a>, with
containingElement <em>target</em>, <em>behavior</em> set to "auto", <em>block</em> set to "center", and <em>inline</em> set to "nearest".</p>
       </ol>
      <li data-md>
       <p>Otherwise:</p>
       <ol>
        <li data-md>
         <p><span spec-section="#scroll-an-element-into-view">Scroll target into view</span>,
with <em>behavior</em> set to "auto", <em>block</em> set to "start",
and <em>inline</em> set to "nearest".</p>
         <div class="note" role="note">This otherwise case is the same as the current
step 3.3.</div>
       </ol>
     </ol>
   </ol>
   <p>Add the following steps to the beginning of the processing model for <span spec-section="#the-indicated-part-of-the-document">the indicated part of the document</span>:</p>
   <ol>
    <li data-md>
     <p>Let <em>fragment directive string</em> be the <em>document</em>’s <a data-link-type="dfn" href="#fragment-directive" id="ref-for-fragment-directive①②">fragment
directive</a>.</p>
    <li data-md>
     <p>If <em>document</em>’s <a href="#allow-text-fragment-directive-flag">§ 2.3.4 allowTextFragmentDirective flag</a> is true then:</p>
     <ol>
      <li data-md>
       <p>Let <em>ranges</em> be a <span spec-section="#list">list</span> that is the result of <a href="#find-text-matches">§ 2.4.2 Find text matches</a> with <em>fragment directive string</em>.</p>
      <li data-md>
       <p>If <em>ranges</em> is non-empty, then:</p>
       <ol>
        <li data-md>
         <p>Let <em>range</em> be the first item of <em>ranges</em>.</p>
         <div class="note" role="note"> The first <span spec-section="#range">Range</span> in <em>ranges</em> is specifically
scrolled into view. This <span spec-section="#range">Range</span>, along with the
remaining <em>ranges</em> should be visually indicated in a way that
is not revealed to script, which is left as UA-defined behavior. </div>
        <li data-md>
         <p>Let <em>node</em> be <em>range</em>’s <span spec-section="#dom-range-commonancestorcontainer">commonAncestorContainer</span>.</p>
        <li data-md>
         <p>While <em>node</em>’s <span spec-section="#dom-node-nodetype">nodeType</span> is not <span spec-section="#dom-node-element_node">ELEMENT_NODE</span>:</p>
         <ol>
          <li data-md>
           <p>Set <em>node</em> to <em>node</em>’s <span spec-section="#dom-node-parentnode">parentNode</span>.</p>
         </ol>
        <li data-md>
         <p>The indicated part of the document is <em>node</em> and <em>range</em>; return.</p>
       </ol>
     </ol>
   </ol>
   <h4 class="heading settled" data-level="2.4.1" id="scroll-rect-into-view"><span class="secno">2.4.1. </span><span class="content">Scroll a DOMRect into view</span><a class="self-link" href="#scroll-rect-into-view"></a></h4>
   <div class="note" role="note"> This section describes a refactoring of the CSSOMVIEW’s <span spec-section="#scroll-an-element-into-view">scroll an element into view</span> algorithm 
to separate the steps for scrolling a DOMRect into view, so it can be used to
scroll a Range into view. </div>
   <p>Move the <span spec-section="#scroll-an-element-into-view">scroll an element into
view</span> algorithm’s steps 3-14 into a new algorithm <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="scroll a DOMRect into view" data-noexport id="scroll-a-domrect-into-view">scroll a DOMRect into
view</dfn>, with input <a href="https://drafts.fxtf.org/geometry-1/#domrect">DOMRect</a> <em>bounding
box</em>, <span spec-section="#dictdef-scrollintoviewoptions">ScrollIntoViewOptions</span> dictionary <em>options</em>, and <span spec-section="#element">Element</span> <em>startingElement</em>. Also move the recursive behavior described at the top
of the <span spec-section="#scroll-an-element-into-view">scroll an element into view</span> algorithm to the <a data-link-type="dfn" href="#scroll-a-domrect-into-view" id="ref-for-scroll-a-domrect-into-view">scroll a DOMRect into view</a> algorithm: "run these steps for
each ancestor element or viewport <b>of <em>startingElement</em></b> that
establishes a scrolling box <em>scrolling box</em>, in order of innermost to
outermost scrolling box".</p>
   <div class="note" role="note"> <em>bounding box</em> is renamed from <em>element bounding border box</em>. </div>
   <p>Replace steps 3-14 of the <span spec-section="#scroll-an-element-into-view">scroll an
element into view</span> algorithm with a call to <a data-link-type="dfn" href="#scroll-a-domrect-into-view" id="ref-for-scroll-a-domrect-into-view①">scroll a DOMRect into view</a>:</p>
   <ol start="3">
    <li data-md>
     <p>Perform <a data-link-type="dfn" href="#scroll-a-domrect-into-view" id="ref-for-scroll-a-domrect-into-view②">scroll a DOMRect into view</a> on <em>element bounding border
box</em> with options <em>options</em> and startingElement <em>element</em>.</p>
   </ol>
   <p>Define a new algorithm <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="scroll-a-range-into-view">scroll a Range into view</dfn>, with input <span spec-section="#range">Range</span> <em>range</em>, <span spec-section="#element">Element</span> <em>containingElement</em>, and a <span spec-section="#dictdef-scrollintoviewoptions">ScrollIntoViewOptions</span> dictionary <em>options</em>:</p>
   <ol>
    <li data-md>
     <p>Let <em>bounding rect</em> be the <a href="https://drafts.fxtf.org/geometry-1/#domrect">DOMRect</a> that is
the return value of invoking <span spec-section="#dom-range-getboundingclientrect">getBoundingClientRect()</span> on <em>range</em>.</p>
    <li data-md>
     <p>Perform <a data-link-type="dfn" href="#scroll-a-domrect-into-view" id="ref-for-scroll-a-domrect-into-view③">scroll a DOMRect into view</a> on <em>bounding rect</em> with <em>options</em> and startingElement <em>containingElement</em>.</p>
   </ol>
   <h4 class="heading settled" data-level="2.4.2" id="find-text-matches"><span class="secno">2.4.2. </span><span class="content">Find text matches</span><a class="self-link" href="#find-text-matches"></a></h4>
   <div class="note" role="note"> This algorithm has input <em>fragment directive input</em>, that is the raw
fragment directive string, and returns a <span spec-section="#list">list</span> of <span spec-section="#range">Range</span>s that are to be visually indicated, and the first should be
scrolled into view. </div>
   <ol>
    <li data-md>
     <p>If <em>fragment directive input</em> does not match the <a data-link-type="dfn" href="#fragmentdirective" id="ref-for-fragmentdirective③">FragmentDirective</a> production, then return an empty <span spec-section="#list">list</span>.</p>
    <li data-md>
     <p>Let <em>directives</em> be a <span spec-section="#list">list</span> of strings that is the
result of <span spec-section="#strictly-split">splitting</span> <em>fragment directive
input</em> on "&amp;".</p>
    <li data-md>
     <p>Let <em>ranges</em> be a <span spec-section="#list">list</span> of <span spec-section="#range">Range</span>s that is
initially empty.</p>
    <li data-md>
     <p>For each string <em>directive</em> in <em>directives</em>:</p>
     <ol>
      <li data-md>
       <p>If <em>directive</em> does not match the production <a data-link-type="dfn" href="#textdirective" id="ref-for-textdirective②">TextDirective</a>,
then continue.</p>
      <li data-md>
       <p>If the result of <a href="#find-a-target-text">§ 2.4.3 Find a target text</a> on <em>directive</em> is
non-null, then <span spec-section="#list-append">append</span> it to <em>ranges</em>.</p>
     </ol>
    <li data-md>
     <p>Return <em>ranges</em>.</p>
   </ol>
   <h4 class="heading settled" data-level="2.4.3" id="find-a-target-text"><span class="secno">2.4.3. </span><span class="content">Find a target text</span><a class="self-link" href="#find-a-target-text"></a></h4>
   <p>To find the target text for a given string <em>text directive input</em>,
the user agent must run these steps:</p>
   <ol>
    <li data-md>
     <p>If <em>text directive input</em> does not begin with the string "text=",
then return null.</p>
    <li data-md>
     <p>Let <em>raw target text</em> be the substring of <em>text directive
input</em> starting at index 5.</p>
     <div class="note" role="note"> This is the remainder of the <em>text directive input</em> following,
but not including, the "text=" prefix. </div>
    <li data-md>
     <p>If <em>raw target text</em> is the empty string, return null.</p>
    <li data-md>
     <p>Let <em>tokens</em> be a <span spec-section="#list">list</span> of strings that is the result of <span spec-section="#split-on-commas">splitting a string on commas</span> of <em>raw target
text</em>.</p>
    <li data-md>
     <p>Let <em>prefix</em> and <em>suffix</em> and <em>textEnd</em> be the empty
string.</p>
     <div class="note" role="note"> prefix, suffix, and textEnd are the optional parameters of the text
directive. </div>
    <li data-md>
     <p>Let <em>potential prefix</em> be the first item of <em>tokens</em>.</p>
    <li data-md>
     <p>If the last character of <em>potential prefix</em> is U+002D (-), then:</p>
     <ol>
      <li data-md>
       <p>Set <em>prefix</em> to the result of removing the last character from <em>potential prefix</em>.</p>
      <li data-md>
       <p><span spec-section="#list-remove">Remove</span> the first item of the list <em>tokens</em>.</p>
     </ol>
    <li data-md>
     <p>Let <em>potential suffix</em> be the last item of <em>tokens</em>.</p>
    <li data-md>
     <p>If the first character of <em>potential suffix</em> is U+002D (-), then:</p>
     <ol>
      <li data-md>
       <p>Set <em>suffix</em> to the result of removing the first character from <em>potential suffix</em>.</p>
      <li data-md>
       <p><span spec-section="#list-remove">Remove</span> the last item of the list <em>tokens</em>.</p>
     </ol>
    <li data-md>
     <p class="assertion">Assert: <em>tokens</em> has <span spec-section="#list-size">size</span> 1 or <em>tokens</em> has <span spec-section="#list-size">size</span> 2.</p>
     <div class="note" role="note"> Once the prefix and suffix are removed from tokens, tokens may either
contain one item (textStart) or two items (textStart and textEnd). </div>
    <li data-md>
     <p>Let <em>textStart</em> be the first item of <em>tokens</em>.</p>
    <li data-md>
     <p>If <em>tokens</em> has <span spec-section="#list-size">size</span> 2, then let <em>textEnd</em> be the last item of <em>tokens</em>.</p>
     <div class="note" role="note"> The strings prefix, textStart, textEnd, and suffix now contain the
text directive parameters as defined in <a href="#syntax">§ 2.1 Syntax</a>. </div>
    <li data-md>
     <p>Let <em>walker</em> be a <span spec-section="#treewalker">TreeWalker</span> equal to <span spec-section="#dom-document-createtreewalker">Document.createTreeWalker()</span>.</p>
    <li data-md>
     <p>Let <em>position</em> be a <span spec-section="#string-position-variable">position
variable</span> that indicates a text offset in <em>walker.currentNode.innerText</em>.</p>
    <li data-md>
     <p>If textEnd is the empty string, then:</p>
     <ol>
      <li data-md>
       <p>Let <em>match position</em> be the result of <a href="#find-match-with-context">§ 2.4.4 Find an exact match with context</a> with input walker <em>walker</em>, search position <em>position</em>,
prefix <em>prefix</em>, query <em>textStart</em>, and suffix <em>suffix</em>.</p>
      <li data-md>
       <p>If <em>match position</em> is null, then return null.</p>
      <li data-md>
       <p>Let <em>match</em> be a Range in <em>walker.currentNode</em> with
position <em>match position</em> and length equal to the length of <em>textStart</em>.</p>
      <li data-md>
       <p>Return <em>match</em>.</p>
     </ol>
    <li data-md>
     <p>Otherwise, let <em>potential start position</em> be the result of <a href="#find-match-with-context">§ 2.4.4 Find an exact match with context</a> with input walker <em>walker</em>, start
position <em>position</em>, prefix <em>prefix</em>, query <em>textStart</em>, and suffix <em>null</em>.</p>
    <li data-md>
     <p>If <em>potential start position</em> is null, then return null.</p>
    <li data-md>
     <p>Let <em>end position</em> be the result of <a href="#find-match-with-context">§ 2.4.4 Find an exact match with context</a> with
input walker <em>walker</em>, search position <em>potential start
position</em>, prefix <em>null</em>, query <em>textEnd</em>, and suffix <em>suffix</em>.</p>
    <li data-md>
     <p>If <em>end position</em> is null, then return null.</p>
    <li data-md>
     <p>Advance <em>end position</em> by the length of <em>textEnd</em>.</p>
    <li data-md>
     <p>Let <em>match</em> be a Range in <em>walker.currentNode</em> with start
position <em>potential start position</em> and length equal to <em>end
position - start position</em>.</p>
    <li data-md>
     <p>Return <em>match</em>.</p>
   </ol>
   <h4 class="heading settled" data-level="2.4.4" id="find-match-with-context"><span class="secno">2.4.4. </span><span class="content">Find an exact match with context</span><a class="self-link" href="#find-match-with-context"></a></h4>
   <div class="note" role="note"> This algorithm has input <em>walker, search position, prefix, query,</em> and <em>suffix</em> and returns a text position that is the start of the match. </div>
   <div class="note" role="note"> The input <em>walker</em> is a <span spec-section="#treewalker">TreeWalker</span> reference, not a
copy, i.e. any modifications are performed on the caller’s instance of <em>walker</em>. </div>
   <ol>
    <li data-md>
     <p>While <em>walker.currentNode</em> is not null:</p>
     <ol>
      <li data-md>
       <p class="assertion">Assert: <em>walker.currentNode</em> is a text node.</p>
      <li data-md>
       <p>Let <em>text</em> be equal to <em>walker.currentNode.innerText</em>.</p>
      <li data-md>
       <p>While <em>search position</em> does not point past the end of <em>text</em>:</p>
       <ol>
        <li data-md>
         <p>If <em>prefix</em> is not the empty string, then:</p>
         <ol>
          <li data-md>
           <p>Advance <em>search position</em> to the position after the result
of <a href="#next-word-bounded-instance">§ 2.4.6 Find the next word bounded instance</a> of <em>prefix</em> in <em>text</em> from <em>search position</em> with <a data-link-type="dfn" href="#current-locale" id="ref-for-current-locale">current
locale</a>.</p>
          <li data-md>
           <p>If <em>search position</em> is null, then break.</p>
          <li data-md>
           <p><span spec-section="#skip-ascii-whitespace">Skip ASCII whitespace</span> on <em>search position</em>.</p>
          <li data-md>
           <p>If <em>search position</em> is at the end of <em>text</em>, then:</p>
           <ol>
            <li data-md>
             <p>Perform <a href="#advance-walker-to-text">§ 2.4.5 Advance a TreeWalker to the next text node</a> on <em>walker</em>.</p>
            <li data-md>
             <p>If <em>walker.currentNode</em> is null, then return null.</p>
            <li data-md>
             <p>Set <em>text</em> to <em>walker.currentNode.innerText</em>.</p>
            <li data-md>
             <p>Set <em>search position</em> to the beginning of <em>text</em>.</p>
            <li data-md>
             <p><span spec-section="#skip-ascii-whitespace">Skip ASCII whitespace</span> on <em>search position</em>.</p>
           </ol>
          <li data-md>
           <p>If the result of <a href="#next-word-bounded-instance">§ 2.4.6 Find the next word bounded instance</a> of <em>query</em> in <em>text</em> from <em>search position</em> with <a data-link-type="dfn" href="#current-locale" id="ref-for-current-locale①">current locale</a> does not start at <em>search
position</em>, then continue.</p>
         </ol>
        <li data-md>
         <p>Advance <em>search position</em> to the position after the result of <a href="#next-word-bounded-instance">§ 2.4.6 Find the next word bounded instance</a> of <em>query</em> in <em>text</em> from <em>search position</em> with <a data-link-type="dfn" href="#current-locale" id="ref-for-current-locale②">current locale</a>.</p>
         <div class="note" role="note"> If a prefix was specified, the search position is at the beginning
of <em>query</em> and this will advance it to the end of the query
to search for a potential suffix. Otherwise, this will find the next
instance of query. </div>
        <li data-md>
         <p>If <em>search position</em> is null, then break.</p>
        <li data-md>
         <p>Let <em>potential match position</em> be a <span spec-section="#string-position-variable">position variable</span> equal to <em>search position</em> minus the length of <em>query</em>.</p>
        <li data-md>
         <p>If <em>suffix</em> is the empty string, then return <em>potential
match position</em>.</p>
        <li data-md>
         <p><span spec-section="#skip-ascii-whitespace">Skip ASCII whitespace</span> on <em>search position</em>.</p>
        <li data-md>
         <p>If <em>search position</em> is at the end of <em>text</em>, then:</p>
         <ol>
          <li data-md>
           <p>Let <em>suffix_walker</em> be a <span spec-section="#treewalker">TreeWalker</span> that is a copy of <em>walker</em>.</p>
          <li data-md>
           <p>Perform <a href="#advance-walker-to-text">§ 2.4.5 Advance a TreeWalker to the next text node</a> on <em>suffix_walker</em>.</p>
          <li data-md>
           <p>If <em>suffix_walker.currentNode</em> is null, then return null.</p>
          <li data-md>
           <p>Set <em>text</em> to <em>suffix_walker.currentNode.innerText</em>.</p>
          <li data-md>
           <p>Set <em>search position</em> to the beginning of <em>text</em>.</p>
          <li data-md>
           <p><span spec-section="#skip-ascii-whitespace">Skip ASCII whitespace</span> on <em>search position</em>.</p>
         </ol>
        <li data-md>
         <p>If the result of <a href="#next-word-bounded-instance">§ 2.4.6 Find the next word bounded instance</a> of <em>suffix</em> in <em>text</em> from <em>search position</em> with <a data-link-type="dfn" href="#current-locale" id="ref-for-current-locale③">current
locale</a> starts at <em>search position</em>, then return <em>potential match position</em>.</p>
       </ol>
      <li data-md>
       <p>Perform <a href="#advance-walker-to-text">§ 2.4.5 Advance a TreeWalker to the next text node</a> on <em>walker</em>.</p>
     </ol>
    <li data-md>
     <p>Return null.</p>
   </ol>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="current-locale">current locale</dfn> is the <a href="https://html.spec.whatwg.org/multipage/dom.html#language">language</a> of the <em>currentNode</em>.</p>
   <h4 class="heading settled" data-level="2.4.5" id="advance-walker-to-text"><span class="secno">2.4.5. </span><span class="content">Advance a TreeWalker to the next text node</span><a class="self-link" href="#advance-walker-to-text"></a></h4>
   <div class="note" role="note"> The input <em>walker</em> is a <span spec-section="#treewalker">TreeWalker</span> reference, not a
copy, i.e. any modifications are performed on the caller’s instance of <em>walker</em>. </div>
   <ol>
    <li data-md>
     <p>While the input <em>walker.currentNode</em> is not null and <em>walker.currentNode</em> is not a text node:</p>
     <ol>
      <li data-md>
       <p>Advance the current node by calling <a href="https://dom.spec.whatwg.org/#dom-treewalker-nextnode"> walker.nextNode()</a></p>
     </ol>
   </ol>
   <h4 class="heading settled" data-level="2.4.6" id="next-word-bounded-instance"><span class="secno">2.4.6. </span><span class="content">Find the next word bounded instance</span><a class="self-link" href="#next-word-bounded-instance"></a></h4>
   <div class="note" role="note"> This algorithm has input <em>query, text, start position,</em> and <em>locale</em> and returns a Range that specifies the word bounded text
instance if it is found. </div>
   <div class="note" role="note"> See <a href="https://github.com/tc39/proposal-intl-segmenter">Intl.Segmenter</a>,
a proposal to specify unicode segmentation, including word segmentation. Once
specified, this algorithm may be improved by making use of the Intl.Segmenter
API for word boundary matching. </div>
   <ol>
    <li data-md>
     <p>While <em>start position</em> does not point past the end of <em>text</em>:</p>
     <ol>
      <li data-md>
       <p>Advance <em>start position</em> to the next instance of <em>query</em> in <em>text</em>.</p>
      <li data-md>
       <p>Let <em>range</em> be a Range with position <em>start position</em> and
length equal to the length of <em>query</em>.</p>
      <li data-md>
       <p>Using locale <em>locale</em>, let <em>left bound</em> be the last word
boundary in <em>text</em> before <em>range</em>.</p>
      <li data-md>
       <p>Using locale <em>locale</em>, let <em>right bound</em> be the first word
boundary in <em>text</em> after <em>range</em>.</p>
       <div class="note" role="note">
        <p> Limiting matching to word boundaries is one of the mitigations to
    limit cross-origin information leakage. A word boundary is as
    defined in the <a href="http://www.unicode.org/reports/tr29/#Word_Boundaries">Unicode
    text segmentation annex</a>. The <a href="http://www.unicode.org/reports/tr29/#Default_Word_Boundaries"> Default Word Boundary Specification</a> defines a default set of
    what constitutes a word boundary, but as the specification mentions,
    a more sophisticated algorithm should be used based on the <em>locale</em>. </p>
        <p> Dictionary-based word bounding should take specific care in
    locales without a word-separating character (e.g. space). In
    those cases, and where the alphabet contains fewer than 100
    characters, the dictionary must not contain more than 20% of the
    alphabet as valid, one-letter words. </p>
       </div>
      <li data-md>
       <p>If <em>left bound</em> immediately precedes <em>range</em> and <em>right
bound</em> immediately follows <em>range</em>, then return <em>range</em>.</p>
     </ol>
    <li data-md>
     <p>Return <em>null</em>.</p>
   </ol>
   <h3 class="heading settled" data-level="2.5" id="indicating-the-text-match"><span class="secno">2.5. </span><span class="content">Indicating The Text Match</span><a class="self-link" href="#indicating-the-text-match"></a></h3>
   <p>In addition to scrolling the text fragment into view as part of the <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#try-to-scroll-to-the-fragment"> Try To Scroll To The Fragment</a> steps, the UA should visually indicate the
matched text in some way such that the user is made aware of the text match.</p>
   <p>The UA should provide to the user some method of dismissing the match, such
that the matched text no longer appears visually indicated.</p>
   <p>The exact appearance and mechanics of the indication are left as UA-defined.
However, the UA must not use the Document’s <a href="https://w3c.github.io/selection-api/#dfn-selection">selection</a> to
indicate the text match as doing so could allow attack vectors for content
exfiltration.</p>
   <p>The UA must not visually indicate any provided context terms.</p>
   <h3 class="heading settled" data-level="2.6" id="feature-detectability"><span class="secno">2.6. </span><span class="content">Feature Detectability</span><a class="self-link" href="#feature-detectability"></a></h3>
   <p>For feature detectability, we propose adding a new FragmentDirective interface
that is exposed via <code>window.location.fragmentDirective</code> if the UA
supports the feature.</p>
<pre class="idl highlight def"><c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="fragmentdirective①"><code><c- g>FragmentDirective</c-></code></dfn> {
};
</pre>
   <p>We amend <a href="https://html.spec.whatwg.org/multipage/history.html#the-location-interface"> The Location Interface</a> to include a <code>fragmentDirective</code> property:</p>
<pre class="idl highlight def"><c- b>interface</c-> <dfn class="idl-code" data-dfn-type="interface" data-export id="location"><code><c- g>Location</c-></code><a class="self-link" href="#location"></a></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#fragmentdirective①" id="ref-for-fragmentdirective①"><c- n>FragmentDirective</c-></a> <dfn class="idl-code" data-dfn-for="Location" data-dfn-type="attribute" data-export data-readonly data-type="FragmentDirective" id="dom-location-fragmentdirective"><code><c- g>fragmentDirective</c-></code><a class="self-link" href="#dom-location-fragmentdirective"></a></dfn>;
};
</pre>
   <h2 class="heading settled" data-level="3" id="generating-text-fragment-directives"><span class="secno">3. </span><span class="content">Generating Text Fragment Directives</span><a class="self-link" href="#generating-text-fragment-directives"></a></h2>
   <div class="note" role="note"> This section is non-normative. </div>
   <p>This section contains recommendations for UAs automatically generating URLs
with a <a data-link-type="dfn" href="#text-fragment-directive" id="ref-for-text-fragment-directive⑧">text fragment directive</a>. These recommendations aren’t normative but
are provided to ensure generated URLs result in maximally stable and usable
URLs.</p>
   <h3 class="heading settled" data-level="3.1" id="prefer-exact-matching-to-range-based"><span class="secno">3.1. </span><span class="content">Prefer Exact Matching To Range-based</span><a class="self-link" href="#prefer-exact-matching-to-range-based"></a></h3>
   <p>The match text can be provided either as an exact string "text=foo%20bar%20baz"
or as a range "text=foo,bar".</p>
   <p>UAs should prefer to specify the entire string where practical. This ensures
that if the destination page is removed or changed, the intended destination can
still be derived from the URL itself.</p>
   <div class="example" id="example-53e82e58">
    <a class="self-link" href="#example-53e82e58"></a> Suppose we wish to craft a URL to
  https://en.wikipedia.org/wiki/History_of_computing quoting the sentence: 
<pre>The first recorded idea of using digital electronics for computing was the
1931 paper "The Use of Thyratrons for High Speed Automatic Counting of
Physical Phenomena" by C. E. Wynn-Williams.
</pre>
    <p>We could create a range-based match like so:</p>
    <p><a href="https://en.wikipedia.org/wiki/History_of_computing#:~:text=The%20first%20recorded,Williams"> https://en.wikipedia.org/wiki/History_of_computing#:~:text=The%20first%20recorded,Williams</a></p>
    <p>Or we could encode the entire sentence using an exact match term:</p>
    <p><a href="https://en.wikipedia.org/wiki/History_of_computing#:~:text=The%20first%20recorded%20idea%20of%20using%20digital%20electronics%20for%20computing%20was%20the%201931%20paper%20%22The%20Use%20of%20Thyratrons%20for%20High%20Speed%20Automatic%20Counting%20of%20Physical%20Phenomena%22%20by%20C.%20E.%20Wynn-Williams"> https://en.wikipedia.org/wiki/History_of_computing#:~:text=The%20first%20recorded%20idea%20of%20using%20digital%20electronics%20for%20computing%20was%20the%201931%20paper%20%22The%20Use%20of%20Thyratrons%20for%20High%20Speed%20Automatic%20Counting%20of%20Physical%20Phenomena%22%20by%20C.%20E.%20Wynn-Williams</a></p>
    <p>The range-based match is less stable, meaning that if the page is changed to
  include another instance of "The first recorded" somewhere earlier in the
  page, the link will now target an unintended text snippet.</p>
    <p>The range-based match is also less useful semantically. If the page is
  changed to remove the sentence, the user won’t know what the intended
  target was. In the exact match case, the user can read, or the UA can
  surface, the text that was being searched for but not found.</p>
   </div>
   <p>Range-based matches can be helpful when the quoted text is excessively long
and encoding the entire string would produce an unwieldly URL.</p>
   <p>It is recommended that text snippets shorter than 300 characters always be
encoded using an exact match. Above this limit, the UA should encode the string
as a range-based match.</p>
   <div class="note" role="note"> TODO:  Can we determine the above limit in some more objective way? </div>
   <h3 class="heading settled" data-level="3.2" id="use-context-only-when-necessary"><span class="secno">3.2. </span><span class="content">Use Context Only When Necessary</span><a class="self-link" href="#use-context-only-when-necessary"></a></h3>
   <p>Context terms allow the <a data-link-type="dfn" href="#text-fragment-directive" id="ref-for-text-fragment-directive⑨">text fragment directive</a> to disambiguate text
snippets on a page. However, their use can make the URL more brittle in some
cases. Often, the desired string will start or end at an element boundary. The
context will therefore exist in an adjacent element. Changes to the page
structure could invalidate the <a data-link-type="dfn" href="#text-fragment-directive" id="ref-for-text-fragment-directive①⓪">text fragment directive</a> since the context and
match text may no longer appear to be adjacent.</p>
   <div class="example" id="example-735b40dc">
    <a class="self-link" href="#example-735b40dc"></a> Suppose we wish to craft a URL for the following text: 
<pre>&lt;div class="section">HEADER&lt;/div>
&lt;div class="content">Text to quote&lt;/div>
</pre>
    <p>We could craft the <a data-link-type="dfn" href="#text-fragment-directive" id="ref-for-text-fragment-directive①①">text fragment directive</a> as follows:</p>
<pre>text=HEADER-,Text%20to%20quote
</pre>
    <p>However, suppose the page changes to add a "[edit]" link beside all section
  headers. This would now break the URL.</p>
   </div>
   <p>Where a text snippet is long enough and unique, a UA should prefer to avoid
adding superfluous context terms.</p>
   <p>It is recommended that context should be used only if one of the following is
true:</p>
   <ul>
    <li>The UA determines the quoted text is ambiguous
    <li>The quoted text contains 3 or fewer words
   </ul>
   <div class="note" role="note"> TODO: Determine the numeric limit above in a more objective way </div>
   <h3 class="heading settled" data-level="3.3" id="determine-if-fragment-id-is-needed"><span class="secno">3.3. </span><span class="content">Determine If Fragment Id Is Needed</span><a class="self-link" href="#determine-if-fragment-id-is-needed"></a></h3>
   <p>When the UA navigates to a URL containing a <a data-link-type="dfn" href="#text-fragment-directive" id="ref-for-text-fragment-directive①②">text fragment directive</a>, it will
fallback to scrolling into view a regular element-id based fragment if it
exists and the text fragment isn’t found.</p>
   <p>This can be useful to provide a fallback, in case the text in the document
changes, invalidating the <a data-link-type="dfn" href="#text-fragment-directive" id="ref-for-text-fragment-directive①③">text fragment directive</a>.</p>
   <div class="example" id="example-5990805b">
    <a class="self-link" href="#example-5990805b"></a> Suppose we wish to craft a URL to
  https://en.wikipedia.org/wiki/History_of_computing quoting the sentence: 
<pre>The earliest known tool for use in computation is the Sumerian abacus
</pre>
    <p>By specifying the section that the text appears in, we ensure that, if the
  text is changed or removed, the user will still be pointed to the relevant
  section:</p>
    <p><a href="https://en.wikipedia.org/wiki/History_of_computing#Early_computation:~:text=The%20earliest%20known%20tool%20for%20use%20in%20computation%20is%20the%20Sumerian%20abacus"> https://en.wikipedia.org/wiki/History_of_computing#Early_computation:~:text=The%20earliest%20known%20tool%20for%20use%20in%20computation%20is%20the%20Sumerian%20abacus</a></p>
   </div>
   <p>However, UAs should take care that the fallback element-id fragment is the
correct one:</p>
   <div class="example" id="example-0ae51dec">
    <a class="self-link" href="#example-0ae51dec"></a> Suppose the user navigates to
  https://en.wikipedia.org/wiki/History_of_computing#Early_computation. They
  now scroll down to the Symbolic Computations section. There, they select a
  text snippet and choose to create a URL to it: 
<pre>By the late 1960s, computer systems could perform symbolic algebraic
manipulations
</pre>
    <p>The UA should note that, even though the current URL of the page is:
  https://en.wikipedia.org/wiki/History_of_computing#Early_computation, using
  #Early_computation as a fallback is inappropriate. If the above sentence is
  changed or removed, the page will load in the #Early_computation section
  which could be quite confusing to the user.</p>
    <p>If the UA cannot reliably determine an appropriate fragment to fallback to,
  it should remove the fragment id from the URL:</p>
    <p><a href="https://en.wikipedia.org/wiki/History_of_computing#:~:text=By%20the%20late%201960s,%20computer%20systems%20could%20perform%20symbolic%20algebraic%20manipulations"> https://en.wikipedia.org/wiki/History_of_computing#:~:text=By%20the%20late%201960s,%20computer%20systems%20could%20perform%20symbolic%20algebraic%20manipulations</a></p>
   </div>
  </main>
  <div data-fill-with="conformance">
   <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <p> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology.
            The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL”
            in the normative parts of this document
            are to be interpreted as described in RFC 2119.
            However, for readability,
            these words do not appear in all uppercase letters in this specification. </p>
   <p> All of the text of this specification is normative
            except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
   <p> Examples in this specification are introduced with the words “for example”
            or are set apart from the normative text with <code>class="example"</code>, like this: </p>
   <div class="example" id="example-example"><a class="self-link" href="#example-example"></a> This is an example of an informative example. </div>
   <p> Informative notes begin with the word “Note”
            and are set apart from the normative text with <code>class="note"</code>, like this: </p>
   <p class="note" role="note"> Note, this is an informative note. </p>
  </div>
<script>
(function() {
  "use strict";
  var collapseSidebarText = '<span aria-hidden="true">←</span> '
                          + '<span>Collapse Sidebar</span>';
  var expandSidebarText   = '<span aria-hidden="true">→</span> '
                          + '<span>Pop Out Sidebar</span>';
  var tocJumpText         = '<span aria-hidden="true">↑</span> '
                          + '<span>Jump to Table of Contents</span>';

  var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
  var autoToggle   = function(e){ toggleSidebar(e.matches) };
  if(sidebarMedia.addListener) {
    sidebarMedia.addListener(autoToggle);
  }

  function toggleSidebar(on) {
    if (on == undefined) {
      on = !document.body.classList.contains('toc-sidebar');
    }

    /* Don’t scroll to compensate for the ToC if we’re above it already. */
    var headY = 0;
    var head = document.querySelector('.head');
    if (head) {
      // terrible approx of "top of ToC"
      headY += head.offsetTop + head.offsetHeight;
    }
    var skipScroll = window.scrollY < headY;

    var toggle = document.getElementById('toc-toggle');
    var tocNav = document.getElementById('toc');
    if (on) {
      var tocHeight = tocNav.offsetHeight;
      document.body.classList.add('toc-sidebar');
      document.body.classList.remove('toc-inline');
      toggle.innerHTML = collapseSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, 0 - tocHeight);
      }
      tocNav.focus();
      sidebarMedia.addListener(autoToggle); // auto-collapse when out of room
    }
    else {
      document.body.classList.add('toc-inline');
      document.body.classList.remove('toc-sidebar');
      toggle.innerHTML = expandSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, tocNav.offsetHeight);
      }
      if (toggle.matches(':hover')) {
        /* Unfocus button when not using keyboard navigation,
           because I don’t know where else to send the focus. */
        toggle.blur();
      }
    }
  }

  function createSidebarToggle() {
    /* Create the sidebar toggle in JS; it shouldn’t exist when JS is off. */
    var toggle = document.createElement('a');
      /* This should probably be a button, but appearance isn’t standards-track.*/
    toggle.id = 'toc-toggle';
    toggle.class = 'toc-toggle';
    toggle.href = '#toc';
    toggle.innerHTML = collapseSidebarText;

    sidebarMedia.addListener(autoToggle);
    var toggler = function(e) {
      e.preventDefault();
      sidebarMedia.removeListener(autoToggle); // persist explicit off states
      toggleSidebar();
      return false;
    }
    toggle.addEventListener('click', toggler, false);


    /* Get <nav id=toc-nav>, or make it if we don’t have one. */
    var tocNav = document.getElementById('toc-nav');
    if (!tocNav) {
      tocNav = document.createElement('p');
      tocNav.id = 'toc-nav';
      /* Prepend for better keyboard navigation */
      document.body.insertBefore(tocNav, document.body.firstChild);
    }
    /* While we’re at it, make sure we have a Jump to Toc link. */
    var tocJump = document.getElementById('toc-jump');
    if (!tocJump) {
      tocJump = document.createElement('a');
      tocJump.id = 'toc-jump';
      tocJump.href = '#toc';
      tocJump.innerHTML = tocJumpText;
      tocNav.appendChild(tocJump);
    }

    tocNav.appendChild(toggle);
  }

  var toc = document.getElementById('toc');
  if (toc) {
    createSidebarToggle();
    toggleSidebar(sidebarMedia.matches);

    /* If the sidebar has been manually opened and is currently overlaying the text
       (window too small for the MQ to add the margin to body),
       then auto-close the sidebar once you click on something in there. */
    toc.addEventListener('click', function(e) {
      if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) {
        toggleSidebar(false);
      }
    }, false);
  }
  else {
    console.warn("Can’t find Table of Contents. Please use <nav id='toc'> around the ToC.");
  }

  /* Wrap tables in case they overflow */
  var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index');
  var numTables = tables.length;
  for (var i = 0; i < numTables; i++) {
    var table = tables[i];
    var wrapper = document.createElement('div');
    wrapper.className = 'overlarge';
    table.parentNode.insertBefore(wrapper, table);
    wrapper.appendChild(table);
  }

})();
</script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#characterstring">CharacterString</a><span>, in §2.2.2</span>
   <li><a href="#current-locale">current locale</a><span>, in §2.4.4</span>
   <li><a href="#explicitchar">ExplicitChar</a><span>, in §2.2.2</span>
   <li><a href="#dom-location-fragmentdirective">fragmentDirective</a><span>, in §2.6</span>
   <li><a href="#fragment-directive">fragment directive</a><span>, in §2.2.1</span>
   <li>
    FragmentDirective
    <ul>
     <li><a href="#fragmentdirective①">(interface)</a><span>, in §2.6</span>
     <li><a href="#fragmentdirective">definition of</a><span>, in §2.2.2</span>
    </ul>
   <li><a href="#fragment-directive-delimiter">fragment directive delimiter</a><span>, in §2.2.1</span>
   <li><a href="#location">Location</a><span>, in §2.6</span>
   <li><a href="#percentencodedchar">PercentEncodedChar</a><span>, in §2.2.2</span>
   <li><a href="#scroll-a-domrect-into-view">scroll a DOMRect into view</a><span>, in §2.4.1</span>
   <li><a href="#scroll-a-range-into-view">scroll a Range into view</a><span>, in §2.4.1</span>
   <li><a href="#textdirective">TextDirective</a><span>, in §2.2.2</span>
   <li><a href="#textdirectiveparameters">TextDirectiveParameters</a><span>, in §2.2.2</span>
   <li><a href="#textdirectiveprefix">TextDirectivePrefix</a><span>, in §2.2.2</span>
   <li><a href="#textdirectivesuffix">TextDirectiveSuffix</a><span>, in §2.2.2</span>
   <li><a href="#text-fragment-directive">text fragment directive</a><span>, in §2.2.2</span>
   <li><a href="#unknowndirective">UnknownDirective</a><span>, in §2.2.2</span>
   <li><a href="#valid-fragment-directive">valid fragment directive</a><span>, in §2.2.2</span>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>interface</c-> <a href="#fragmentdirective①"><code><c- g>FragmentDirective</c-></code></a> {
};

<c- b>interface</c-> <a href="#location"><code><c- g>Location</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#fragmentdirective①" id="ref-for-fragmentdirective①①"><c- n>FragmentDirective</c-></a> <a data-readonly data-type="FragmentDirective" href="#dom-location-fragmentdirective"><code><c- g>fragmentDirective</c-></code></a>;
};

</pre>
  <aside class="dfn-panel" data-for="fragment-directive">
   <b><a href="#fragment-directive">#fragment-directive</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fragment-directive">2.1. Syntax</a>
    <li><a href="#ref-for-fragment-directive①">2.2. The Fragment Directive</a> <a href="#ref-for-fragment-directive②">(2)</a> <a href="#ref-for-fragment-directive③">(3)</a>
    <li><a href="#ref-for-fragment-directive④">2.2.1. Parsing the fragment directive</a> <a href="#ref-for-fragment-directive⑤">(2)</a> <a href="#ref-for-fragment-directive⑥">(3)</a> <a href="#ref-for-fragment-directive⑦">(4)</a> <a href="#ref-for-fragment-directive⑧">(5)</a> <a href="#ref-for-fragment-directive⑨">(6)</a>
    <li><a href="#ref-for-fragment-directive①⓪">2.2.2. Fragment directive grammar</a> <a href="#ref-for-fragment-directive①①">(2)</a>
    <li><a href="#ref-for-fragment-directive①②">2.4. Navigating to a Text Fragment</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="fragment-directive-delimiter">
   <b><a href="#fragment-directive-delimiter">#fragment-directive-delimiter</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fragment-directive-delimiter">2.2.1. Parsing the fragment directive</a> <a href="#ref-for-fragment-directive-delimiter①">(2)</a> <a href="#ref-for-fragment-directive-delimiter②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="fragmentdirective">
   <b><a href="#fragmentdirective">#fragmentdirective</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fragmentdirective">2.2.2. Fragment directive grammar</a> <a href="#ref-for-fragmentdirective②">(2)</a>
    <li><a href="#ref-for-fragmentdirective③">2.4.2. Find text matches</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="unknowndirective">
   <b><a href="#unknowndirective">#unknowndirective</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-unknowndirective">2.2.2. Fragment directive grammar</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="text-fragment-directive">
   <b><a href="#text-fragment-directive">#text-fragment-directive</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-text-fragment-directive">2.1. Syntax</a>
    <li><a href="#ref-for-text-fragment-directive①">2.3.1. Motivation</a> <a href="#ref-for-text-fragment-directive②">(2)</a> <a href="#ref-for-text-fragment-directive③">(3)</a> <a href="#ref-for-text-fragment-directive④">(4)</a>
    <li><a href="#ref-for-text-fragment-directive⑤">2.3.2. Search Timing</a>
    <li><a href="#ref-for-text-fragment-directive⑥">2.3.3. Should Allow Text Fragment</a>
    <li><a href="#ref-for-text-fragment-directive⑦">2.4. Navigating to a Text Fragment</a>
    <li><a href="#ref-for-text-fragment-directive⑧">3. Generating Text Fragment Directives</a>
    <li><a href="#ref-for-text-fragment-directive⑨">3.2. Use Context Only When Necessary</a> <a href="#ref-for-text-fragment-directive①⓪">(2)</a> <a href="#ref-for-text-fragment-directive①①">(3)</a>
    <li><a href="#ref-for-text-fragment-directive①②">3.3. Determine If Fragment Id Is Needed</a> <a href="#ref-for-text-fragment-directive①③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="textdirective">
   <b><a href="#textdirective">#textdirective</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-textdirective">2.2.2. Fragment directive grammar</a> <a href="#ref-for-textdirective①">(2)</a>
    <li><a href="#ref-for-textdirective②">2.4.2. Find text matches</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="textdirectiveparameters">
   <b><a href="#textdirectiveparameters">#textdirectiveparameters</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-textdirectiveparameters">2.2.2. Fragment directive grammar</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="textdirectiveprefix">
   <b><a href="#textdirectiveprefix">#textdirectiveprefix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-textdirectiveprefix">2.2.2. Fragment directive grammar</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="textdirectivesuffix">
   <b><a href="#textdirectivesuffix">#textdirectivesuffix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-textdirectivesuffix">2.2.2. Fragment directive grammar</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="characterstring">
   <b><a href="#characterstring">#characterstring</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-characterstring">2.2.2. Fragment directive grammar</a> <a href="#ref-for-characterstring①">(2)</a> <a href="#ref-for-characterstring②">(3)</a> <a href="#ref-for-characterstring③">(4)</a> <a href="#ref-for-characterstring④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="explicitchar">
   <b><a href="#explicitchar">#explicitchar</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-explicitchar">2.2.2. Fragment directive grammar</a> <a href="#ref-for-explicitchar①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="percentencodedchar">
   <b><a href="#percentencodedchar">#percentencodedchar</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-percentencodedchar">2.2.2. Fragment directive grammar</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="scroll-a-domrect-into-view">
   <b><a href="#scroll-a-domrect-into-view">#scroll-a-domrect-into-view</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scroll-a-domrect-into-view">2.4.1. Scroll a DOMRect into view</a> <a href="#ref-for-scroll-a-domrect-into-view①">(2)</a> <a href="#ref-for-scroll-a-domrect-into-view②">(3)</a> <a href="#ref-for-scroll-a-domrect-into-view③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="scroll-a-range-into-view">
   <b><a href="#scroll-a-range-into-view">#scroll-a-range-into-view</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scroll-a-range-into-view">2.4. Navigating to a Text Fragment</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="current-locale">
   <b><a href="#current-locale">#current-locale</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-locale">2.4.4. Find an exact match with context</a> <a href="#ref-for-current-locale①">(2)</a> <a href="#ref-for-current-locale②">(3)</a> <a href="#ref-for-current-locale③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="fragmentdirective①">
   <b><a href="#fragmentdirective①">#fragmentdirective①</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fragmentdirective①">2.6. Feature Detectability</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>